<template>
  <div class="detail">
    <div class="top">
        <van-sticky>
      <van-nav-bar left-text="返回" title="详情" left-arrow @click-left="getBack">
        <template #right>
          <van-icon name="share-o" size="18" @click="showShare = true" />
        </template>
      </van-nav-bar>
        </van-sticky>
      <van-share-sheet
        v-model="showShare"
        title="立即分享给好友"
        :options="options"
        @select="onSelect"
      />
    </div>

    <div class="content-box">
      <div class="content-box-top">
        <div class="content-box-top-left">
          <img :src="imgSrc + detailData.albumInfo.cover" />
        </div>
        <div class="content-box-top-right">
          <div>{{ detailData.albumInfo.title }}</div>
        </div>
      </div>

      <div class="content">
        <van-collapse v-model="activeNames">
          <van-collapse-item title="简介" name="1">
            <p>{{ detailData.albumInfo.customTitle }}</p>
            <p>{{ detailData.albumInfo.recommendReason }}</p>
            <p>{{ detailData.albumInfo.shortIntro }}</p>
          </van-collapse-item>
        </van-collapse>
      </div>

      <div class="content-list">
          <van-collapse v-model="active">
          <van-collapse-item title="相关节目" name="1">
           <van-grid direction="horizontal" :column-num="1" :center="false">
          <van-grid-item icon="music-o" v-for="(item,index) in gridData" :key="index" :text="item.trackInfo.title"
          @click="playTo({id:item.trackInfo.albumId,playUrl:item.trackInfo.playPath,title:item.trackInfo.title,src:item.trackInfo.cover})" />
        </van-grid>
          </van-collapse-item>
        </van-collapse>
        
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "detail",
  data() {
    return {
      detailData: {
          albumInfo:{}
      },
      activeNames: [""],
      active:['1'],
      showShare: false,
      imgSrc: "//imagev2.xmcdn.com/",
      options: [
        { name: "微信", icon: "wechat" },
        { name: "微博", icon: "weibo" },
        { name: "复制链接", icon: "link" },
        { name: "分享海报", icon: "poster" },
        { name: "二维码", icon: "qrcode" },
      ],
      gridData:[]
    };
  },
  created() {
    let id = this.$route.params.id;
      // console.log(id);
    this.getDetailId(id);
    this.getgridData(id);
  },
  methods: {
    onSelect(option) {
      Toast(option.name);
      this.showShare = false;
    },
    getDetailId(id) {
      this.axios({
        method: "get",
        url:
          "https://apis.netstart.cn/ximalaya/album/queryAlbumPage" + "/" + id,
      }).then((result) => {
          // console.log(result);
        // console.log(result.data.data.albumDetailInfo);
        this.detailData = result.data.data.albumDetailInfo;
        // console.log(this.detailData);
      });
    },
    getgridData(id) {
      this.axios({
        method: "get",
        url:
          "https://apis.netstart.cn/ximalaya/album/queryAlbumTrackRecordsByPage?page=1&pageSize=10&asc=true&countKeys=play,comment",
          params:{
              albumId:id
          }
      }).then((result) => {
        // console.log(result.data.data.albumDetailInfo);
        // this.detailData = result.data.data.albumDetailInfo;
        // console.log(result.data.data.trackDetailInfos);
        this.gridData = result.data.data.trackDetailInfos;
        // console.log(this.gridData);
      });
    },
    getBack() {
      this.$router.go(-1);
    },
    playTo(obj) {
         this.$router.push({name:'Play',params:{id:obj.id,playUrl:obj.playUrl,title:obj.title,src:obj.src}})

    }
  },
};
</script>

<style lang="less" scoped>
.content-box {
  padding: 0 10px;
}
.content-box-top {
  height: 75px;
  .content-box-top-left {
    float: left;
    img {
      width: 75px;
    }
  }
  .content-box-top-right {
    margin-left: 10px;
    float: left;
    // background-color: red;
    margin-top: 10px;
    width: 270px;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    word-wrap: break-word;
    word-break: normal;
  }
}
.content {
  margin-top: 5px;
}
</style>